<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>公司词云图</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="Premium Multipurpose Admin & Dashboard Template" name="description">
    <meta content="Themesdesign" name="author">

    <!-- Bootstrap Css -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <!-- Icons Css -->
    <link href="/static/css/icons.min.css" rel="stylesheet" type="text/css">
    <!-- App Css-->
    <link href="/static/css/app.min.css" rel="stylesheet" type="text/css">

</head>

<body>
<!-- Begin page -->
<div id="layout-wrapper">
    <header id="page-topbar">
        <div class="navbar-header">
            <div class="d-flex">
                <!-- LOGO -->
                <div class="navbar-brand-box">
                    <a href="" class="logo logo-dark">
                        <span class="logo-sm">
                            <img src="/static/picture/logo-sm-dark.png" alt="" height="22">
                        </span>
                        <span class="logo-lg">
                            <img src="/static/picture/logo-dark.png" alt="" height="20">
                        </span>
                    </a>

                    <a href="" class="logo logo-light">
                        <span class="logo-sm">
                            <img src="/static/picture/logo-sm-light.png" alt="" height="22">
                        </span>
                        <span class="logo-lg">
                            <img src="/static/picture/logo-light.png" alt="" height="20">
                        </span>
                    </a>
                </div>

                <button type="button" class="btn btn-sm px-3 font-size-24 header-item waves-effect" id="vertical-menu-btn">
                    <i class="mdi mdi-backburger"></i>
                </button>

                <!-- App Search-->
                <form class="app-search d-none d-lg-block">
                    <div class="position-relative">
                        <input type="text" class="form-control" placeholder="楼盘搜索...">
                        <span onclick="toSearch()" class="mdi mdi-magnify"></span>
                        <script>
                            const toSearch = () => {
                                window.location.href = 'http://localhost:5000/page/search'
                            }
                        </script>
                    </div>
                </form>
            </div>

            <div class="d-flex">
                <div class="dropdown d-inline-block">
                    <button type="button" class="btn header-item waves-effect" id="page-header-user-dropdown"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <img class="rounded-circle header-profile-user" src="/static/picture/avatar-1.jpg"
                             alt="Header Avatar">
                        <span class="d-none d-sm-inline-block ml-1">{{ username }}</span>
                        <i class="mdi mdi-chevron-down d-none d-sm-inline-block"></i>
                    </button>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="/user/logOut">
                            <i class="mdi mdi-logout font-size-16 align-middle mr-1"></i>
                            退出登录
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- ========== Left Sidebar Start ========== -->
    <div class="vertical-menu">
        <div data-simplebar="" class="h-100">
            <!--- Sidemenu -->
            <div id="sidebar-menu">
                <!-- Left Menu Start -->
                <ul class="metismenu list-unstyled" id="side-menu">
                    <li class="menu-title">首页菜单</li>
                    <li>
                        <a href="/page/home" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-airplay"></i></div>
                            <span>首页</span>
                        </a>
                    </li>
                    <li>
                        <a href="/page/search" class=" waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-schedule"></i></div>
                            <span>搜索分类</span>
                        </a>
                    </li>
                    <li>
                        <a href="/page/table" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-comment-message"></i></div>
                            <span>数据操作</span>
                        </a>
                    </li>

                    <li class="menu-title">数据可视化</li>
                    <li>
                        <a href="/page/hoursePriceChar" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-box"></i></div>
                            <span>房屋价格分析</span>
                        </a>
                    </li>
                    <li>
                        <a href="/page/hourseDetailChar" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-layer-group"></i></div>
                            <span>房屋详情分析</span>
                        </a>
                    </li>
                    <li>
                        <a href="/page/hourseTypeChar" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-object-ungroup"></i></div>
                            <span>房屋类型分析</span>
                        </a>
                    </li>
                    <li>
                        <a href="/page/hourseOtherChar" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-table"></i></div>
                            <span>房屋其他分析</span>
                        </a>
                    </li>

                    <li class="menu-title">词云图</li>
                    <li class="mm-active">
                        <a href="#" class="waves-effect active">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-box"></i></div>
                            <span>公司词云图</span>
                        </a>
                    </li>
                    <li>
                        <a href="/page/tagsWordCloud" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-layer-group"></i></div>
                            <span>标签词云图</span>
                        </a>
                    </li>

                    <li class="menu-title">人工智能</li>
                    <li>
                        <a href="/page/pricePrediction" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-box"></i></div>
                            <span>房价预测</span>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- Sidebar -->
        </div>
    </div>
    <!-- Left Sidebar End -->

    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content">
        <div class="page-content">
            <!-- Page-Title -->
            <div class="page-title-box">
                <div class="container-fluid">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h4 class="page-title mb-1">公司词云图</h4>
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="javascript: void(0);">词云图</a></li>
                                <li class="breadcrumb-item active">公司词云图</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end page title end breadcrumb -->

            <div class="page-content-wrapper">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="card">
                                <div class="card-body">
                                    <h4 class="header-title">各地区未交房</h4>
                                    <div id="main" style="width: 100%; height: 450px;"></div>
                                </div>
                            </div>
                            <!-- end card -->
                        </div>
                    </div>
                    <!-- end row -->

                    <div class="row">
                        <div class="col-xl-6">
                            <div class="card">
                                <div class="card-body">
                                    <h4 class="header-title">房屋售房情况分析</h4>
                                    <div id="mainTwo" style="width: 100%; height: 450px;"></div>
                                </div>
                            </div>
                            <!-- end card -->
                        </div>

                        <div class="col-xl-6">
                            <div class="card">
                                <div class="card-body">
                                    <h4 class="header-title">标签</h4>
                                    <div id="mainThree" style="width: 100%; height: 450px;"></div>
                                </div>
                            </div>
                            <!-- end card -->
                        </div>
                    </div>
                    <!-- end row -->
                </div>
                <!-- end container-fluid -->
            </div>
            <!-- end page-content-wrapper -->
        </div>
        <!-- End Page-content -->

        <footer class="footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-6">
                        2024 © 沐锦
                    </div>
                    <div class="col-sm-6">
                        <div class="text-sm-right d-none d-sm-block">
                            Copyright &copy; 2024.<a target="_blank" href="#">链家网-房屋数据分析预测系统</a>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>
    <!-- end main content-->

</div>
<!-- END layout-wrapper -->


<!-- JAVASCRIPT -->
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.bundle.min.js"></script>
<script src="/static/js/metisMenu.min.js"></script>
<script src="/static/js/simplebar.min.js"></script>
<script src="/static/js/waves.min.js"></script>
<script src="/static/js/bundle.js"></script>
<script src="/static/js/app.js"></script>
<script src="/static/echarts.js"></script>

<script>
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

// prettier-ignore
let dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
// prettier-ignore
let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
let yMax = 500;
let dataShadow = [];
for (let i = 0; i < data.length; i++) {
  dataShadow.push(yMax);
}
option = {
  title: {
    text: '特性示例：渐变色 阴影 点击缩放',
    subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
  },
  xAxis: {
    data: dataAxis,
    axisLabel: {
      inside: true,
      color: '#fff'
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    z: 10
  },
  yAxis: {
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: '#999'
    }
  },
  dataZoom: [
    {
      type: 'inside'
    }
  ],
  series: [
    {
      type: 'bar',
      showBackground: true,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' }
        ])
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#2378f7' },
            { offset: 0.7, color: '#2378f7' },
            { offset: 1, color: '#83bff6' }
          ])
        }
      },
      data: data
    }
  ]
};
// Enable data zoom when user click bar.
const zoomSize = 6;
myChart.on('click', function (params) {
  console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
  myChart.dispatchAction({
    type: 'dataZoom',
    startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
    endValue:
      dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
  });
});

option && myChart.setOption(option);

</script>

<script>
var chartDom = document.getElementById('mainTwo');
var myChart = echarts.init(chartDom);
var option;

const piePatternSrc =
  '';
const bgPatternSrc =
  '';
const piePatternImg = new Image();
piePatternImg.src = piePatternSrc;
const bgPatternImg = new Image();
bgPatternImg.src = bgPatternSrc;
option = {
  backgroundColor: {
    image: bgPatternImg,
    repeat: 'repeat'
  },
  title: {
    text: '饼图纹理',
    textStyle: {
      color: '#235894'
    }
  },
  tooltip: {},
  series: [
    {
      name: 'pie',
      type: 'pie',
      selectedMode: 'single',
      selectedOffset: 30,
      clockwise: true,
      label: {
        fontSize: 18,
        color: '#235894'
      },
      labelLine: {
        lineStyle: {
          color: '#235894'
        }
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      itemStyle: {
        opacity: 0.7,
        color: {
          image: piePatternImg,
          repeat: 'repeat'
        },
        borderWidth: 3,
        borderColor: '#235894'
      }
    }
  ]
};

option && myChart.setOption(option);

</script>

<script>
var chartDom = document.getElementById('mainThree');
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      areaStyle: {}
    }
  ]
};

option && myChart.setOption(option);

</script>

</body>
</html>